<template>
    <div class="home">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>分类管理</span>
            </div>

            <el-form
                    :inline="true"
                    :label-position="labelPosition"
                    label-width="80px"
                    :model="formLabelAlign"
            >
                <div class="block" v-for="item in imageForm" :key="item.tId">
                    <el-card class="box-card" >
                        <el-form-item>
            <span slot="label">
              <br />
              <h1 align="center">{{ item.tname }}</h1>
            </span>
                            <!--  <span class="demonstration">{{ item.pName }}</span>-->
                            <el-image
                                    style="width: 200px; height: 200px"
                                    :src="item.photo[0].filePath"
                                    :fit="contain"
                                    @click="toDetail(item.tid)"
                            ></el-image>
                        </el-form-item>
                    </el-card>
                </div>
            </el-form>
        </el-card>
    </div>
</template>

<script>

    export default {
        name: "TagManage",
        data() {
            return {
                labelPosition: "top",
                fits: ["contain"],
                url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
                imageForm: {
                    tId: "",
                    userId: "",
                    tName: "",
                    tCreated: "",
                    photo:{
                        pId: "",
                        pName: "",
                        isCollection: 0, //是否被收藏
                        filePath: "",
                    }
                },
            };
        },
        created() {
            this.listAll();
        },
        methods: {
            listAll() {
                this.$axios.get("tag/TagPhoto").then((response) => {
                    console.log(response.data);
                    this.imageForm = response.data.data;

                    console.log(this.imageForm[0].photo)
                });
            },
            toDetail(tId) {
                this.$router.push({
                    name: "tagToPhoto",
                    params: {
                        tId:tId
                    },
                });
            },
        },
    };
</script>

<style lang="less">
    .home {
        .el-card {
            background-color: #8181c7ba;
            .el-card__header {
                font-size: 20px;
                font-weight: 600;
                background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
                color: #234d65;
            }
        }
    }
    .block {
        display: inline-block;
        float: left;
        .box-card{
            background-color: #ceced2a3;
            margin-left: 15px;
            margin-right: 15px;
            margin-top: 10px;
        }
    }
    .el-form-item {
        /*垂直居中 */
        vertical-align: middle;
        /*水平居中*/
        text-align: center;
        padding: 0px;
    }
</style>
